<%@page language="java" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
  <!-- [Head] start -->
  <head>
    <title>SignUp | Berry Bootstrap 5 Admin Template</title>
    <!-- [Meta] -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="description"
      content="Berry is made using Bootstrap 5 design framework. Download the free admin template & use it for your project."
    />
    <meta name="keywords" content="Berry, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template" />
    <script type="text/javascript" src="/myhouse/static/mediator/js/jquery-3.2.1.min.js"></script>
    <!-- [Favicon] icon -->
    <link rel="icon" href="/myhouse/static/mediator/images/favicon.svg" type="image/x-icon" />
 <!-- [Google Font] Family -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link" />
<!-- [Tabler Icons] https://tablericons.com -->
<link rel="stylesheet" href="/myhouse/static/mediator/fonts/tabler-icons.min.css" />
<!-- [Material Icons] https://fonts.google.com/icons -->
<link rel="stylesheet" href="/myhouse/static/mediator/fonts/material.css" />
<!-- [Template CSS Files] -->
<link rel="stylesheet" href="/myhouse/static/mediator/css/style.css" id="main-style-link" />
<link rel="stylesheet" href="/myhouse/static/mediator/css/style-preset.css" id="preset-style-link" />

  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->
  <body>
    <!-- [ Pre-loader ] start -->
    <div class="loader-bg">
      <div class="loader-track">
        <div class="loader-fill"></div>
      </div>
    </div>
    <!-- [ Pre-loader ] End -->

    <div class="auth-main">
      <div class="auth-wrapper v3">
        <div class="auth-form">
          <div class="card mt-5">
            <div class="card-body">
              <a href="#" class="d-flex justify-content-center mt-3">
                <img src="/myhouse/static/mediator/images/logo-dark.svg" />
              </a>
              <form>
              <div class="form-floating mb-3">
                <input type="text" class="form-control" id="name" placeholder="Username" name="mediatorName"/>
                <label for="floatingInput">用户名</label>
                <span id="Account"></span>
              </div>
              <div class="form-floating mb-3">
                <input type="password" class="form-control" id="password" placeholder="password" name="mediatorPass" />
                <label for="floatingInput">密码</label>
                <span id="pass"></span>
              </div>
              <div class="form-floating mb-3">
                <input type="password" class="form-control" id="typepassword" placeholder="Password"  />
                <label for="floatingInput">确认密码</label>
                <span id="con"></span>
              </div>
                <span><a href="/myhouse/mediator/login">已有用户？去登录！</a></span>
                <div class="d-grid mt-4">
                  <input type="button" value="注册" class="btn btn-secondary p-2">
                </div>
              </form>
              <script>
                $(function (){
                  $(".btn").click(tabled);
                  $("#name").blur(usernamecheck);
                  $("#password").blur(passwords);
                  $("#typepassword").blur(confirm)
                });
                function tabled(){
                  var name = $("#name").val();
                  var pass = $("#password").val();
                  var flag;
                  $.ajax({
                    url:"/myhouse/mediator/medRegisterName",
                    type:"post",
                    async:false,
                    data:{mediatorName:name},
                    abort:false,
                    success:function (mes){
                      if (mes=="0"){
                        $("#Account").text("√")
                        $("#Account").css("color","green")
                        flag = true;
                        $.ajax({
                          url: "/myhouse/mediator/addMedRegister",
                          type: "post",
                          data: {mediatorName:name,mediatorPass:pass},
                          success:function (mes){
                              location.href = "/myhouse/mediator/login"
                          }
                        });
                      }else if(mes == "1"){
                        $("#Account").html("用户名已经被注册了，请换一个吧")
                        $("#Account").css("color","red");
                        flag = false;
                      }
                    }
                  });
                }
              </script>

              <script>//判断用户名是否合法
                function usernamecheck(){
                  let username = $("#name").val();
                  let reg = /^[\u4e00-\u999ffffA-Za-z0-9_]{2,10}$/;
                  if (reg.test(username)){
                    $("#Account").html("√")
                    $("#Account").css("color","green")
                    return true;
                  } else {
                    $("#Account").html("×")
                    $("#Account").css("color","red")
                    return false;
                  }
                }
              </script>
              <script>//判断密码合法吗
              function passwords(){
                let pass =  $("#password").val();
                let regs = /^\w{6,8}$/;
                if(regs.test(pass)&&pass!=""){
                  $("#pass").text("√");
                  $("#pass").css("color","green");
                  return true;
                }
                else{
                  $("#pass").text("请输入6-8位大小写英文字母和数字！");
                  $("#pass").css("color","red");
                  return false;
                }
              }
              </script>
              <script>
                function confirm(){
                  let confirmpass = $("#typepassword").val();
                  let confirm = $("#password").val();
                  if (confirmpass == confirm && confirmpass !=""){
                    $("#con").text("√");
                    $("#con").css("color","green");
                    return true;
                  }else {
                    $("#con").text("密码不一致，请重输");
                    $("#con").css("color","red");
                  }

                }
              </script>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [ Main Content ] end -->
    <!-- Required Js -->
    <script src="/myhouse/static/mediator/js/plugins/popper.min.js"></script>
    <script src="/myhouse/static/mediator/js/plugins/simplebar.min.js"></script>
    <script src="/myhouse/static/mediator/js/plugins/bootstrap.min.js"></script>
    <script src="/myhouse/static/mediator/js/config.js"></script>
    <script src="/myhouse/static/mediator/js/pcoded.js"></script>

  </body>
  <!-- [Body] end -->
</html>
